import React, { memo } from 'react'
import { HotArtistWrapper,ContentWrapper } from './style'
import { shallowEqual, useSelector } from 'react-redux'
import { formatImg } from '@/utils/format'
import useShowArtistDetail from '@/hooks/useShowArtistDetail'
export default memo(function HotArtist() {
  const { artistList } = useSelector(state => ({
    artistList:state.getIn(['artist','artistList'])
  }), shallowEqual)
  const goToArtistDetail = useShowArtistDetail()
  return (
    <HotArtistWrapper>
      <h2 className='title'>热门歌手</h2>
      <ContentWrapper>
        {
          artistList.slice(0, 6).map(item => {
            return (
              <div className='item' key={item.id} onClick={e => goToArtistDetail(item.id)}>
                <img src={formatImg(item.img1v1Url, 50)} alt="" />
                <div className="name text-nowrap">{item.name}</div>
              </div>
            )
          })
        }
      </ContentWrapper>
    </HotArtistWrapper>
  )
})
